import React from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';

class UsersManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
    };
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'users/findUser',
      payload: {
        page_no: 1,
        page_size: 20,
      },
    });
  }


  componentWillReceiveProps(nextProps) {
    this.setState({
      dataSource: nextProps.users.userList.data,
    });
  }


  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.setState({ dataSource });
      }
    };
  }
  render() {
    const columns = [{
      title: 'ID',
      dataIndex: 'id',
      width: '30%',
    }, {
      title: '用户名',
      dataIndex: 'user_name',
    }, {
      title: '电话号码',
      dataIndex: 'tel',
    }, {
      title: '操作',
      dataIndex: '',
      render: (record) => {
        return (
          this.state.dataSource.length >= 1 ?
            (
              <div>
                <Link to={{ pathname: '/basicLayout/userdetail', query: { ...record } }}>
                  <span>查看详情</span>
                </Link>
              </div>
            ) : null
        );
      },
    }];
    return (
      <div>
        <Table
          bordered
          dataSource={this.state.dataSource}
          columns={columns}
          pagination={{
          defaultPageSize: 5,
          pageSize: 5,
          showTotal: () => {
              return `共 ${this.state.dataSource.length} 条数据`;
          },
        }}
        />
      </div>
    );
  }
}


export default connect(({ users }) => ({
  users,
}))(UsersManage);
